<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8' />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
  <title>地理位置</title>
</head>

<body>
  <div id="map" style="width: 500px;height: 500px;"></div>

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&amp;ak=GGvdbFq6GxkZaAwalSOt2i1O"></script>
  <script type="text/javascript"
    src="http://api.map.baidu.com/getscript?v=3.0&amp;ak=GGvdbFq6GxkZaAwalSOt2i1O&amp;services=&amp;t=20200826150406"></script>
  <script type="text/javascript" src="http://dev.baidu.com/wiki/static/map/API/examples/script/convertor.js"></script>

  <script type="text/javascript">

    var map;
    var gpsPoint;
    var baiduPoint;
    var gpsAddress;
    var baiduAddress;
    var x;
    var y;
    function getLocation() {
      //根据IP获取城市
      var myCity = new BMap.LocalCity();
      myCity.get(getCityByIP);

      //获取GPS坐标
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showMap, handleError, { enableHighAccuracy: true, maximumAge: 1000 });
      } else {
        alert("您的浏览器不支持使用HTML 5来获取地理位置服务");
      }
    }

    function showMap(value) {
      var longitude = value.coords.longitude;
      var latitude = value.coords.latitude;
      map = new BMap.Map("map");
      x = latitude;
      y = longitude;
      //alert("坐标经度为：" + latitude + "， 纬度为：" + longitude );
      gpsPoint = new BMap.Point(longitude, latitude); // 创建点坐标
      map.centerAndZoom(gpsPoint, 15);

      //根据坐标逆解析地址
      var geoc = new BMap.Geocoder();
      geoc.getLocation(gpsPoint, getCityByCoordinate);
      // console.log(BMap.Convertor.translate);
      //BMap.Convertor.translate(gpsPoint, 0, translateCallback);
      map.enableScrollWheelZoom(true);
    }

    translateCallback = function (point) {
      console.log(point);
      baiduPoint = point;
      map.centerAndZoom(baiduPoint, 18);
      var geoc = new BMap.Geocoder();
      geoc.getLocation(baiduPoint, getCityByBaiduCoordinate);
    }

    function getCityByCoordinate(rs) {
      gpsAddress = rs.addressComponents;
      var address = "GPS标注：" + gpsAddress.province + "," + gpsAddress.city + "," + gpsAddress.district + "," + gpsAddress.street + "," + gpsAddress.streetNumber;
      var marker = new BMap.Marker(gpsPoint); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中
      var labelgps = new BMap.Label(address, { offset: new BMap.Size(20, -10) });
      marker.setLabel(labelgps); //添加GPS标注
    }

    function getCityByBaiduCoordinate(rs) {
      baiduAddress = rs.addressComponents;
      var address = "百度标注：" + baiduAddress.province + "," + baiduAddress.city + "," + baiduAddress.district + "," + baiduAddress.street + "," + baiduAddress.streetNumber;
      var marker = new BMap.Marker(baiduPoint); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中
      var labelbaidu = new BMap.Label(address, { offset: new BMap.Size(20, -10) });
      marker.setLabel(labelbaidu); //添加百度标注
    }

    //根据IP获取城市
    function getCityByIP(rs) {
      var cityName = rs.name;
      alert("根据IP定位您所在的城市为:" + cityName);
    }

    function handleError(value) {
      switch (value.code) {
        case 1:
          alert("位置服务被拒绝");
          break;
        case 2:
          alert("暂时获取不到位置信息");
          break;
        case 3:
          alert("获取信息超时");
          break;
        case 4:
          alert("未知错误");
          break;
      }
    }

    function init() {
      getLocation();
    }

    window.onload = init;


  </script>
</body>

</html>